<template>
  <div>
    <el-form :mode="dataForm" style="margin-bottom: 12px">
      <el-card>
        <template #header>
          <el-button type="primary" @click="handleSubmit()">提交</el-button>
        </template>
        <p>经过处理后的数据：</p>
        <div>{{ JSON.stringify(reckonData) }}</div>
      </el-card>
      <el-row :getter="20">
        <el-col :span="12">
          <el-card>
            <template #header>
              <div>下拉筛选【模糊查询】</div>
            </template>
            <el-form-item label="名称">
              <SelectBase v-model="dataForm.keyword" :options="options" />
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <div>下拉筛选【加载更多】</div>
            </template>
            <el-form-item label="名称">
              <SelectLazy v-model="dataForm.name" />
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <div>范围区间</div>
            </template>
            <el-form-item label="范围值">
              <RangeMore ref="rangeMoreRef" v-model="dataForm.range" />
            </el-form-item>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <template #header>
              <div>日期区间</div>
            </template>
            <el-form-item label="日期">
              <DatePicker v-model="dataForm.date" />
            </el-form-item>
          </el-card>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script setup>
  import { onMounted, reactive, ref } from "vue";
  import SelectBase from "/@/plugins/use/SelectBase.vue";
  import SelectLazy from "/@/plugins/use/SelectLazy.vue";
  import RangeMore from "/@/plugins/use/RangeMore.vue";
  import DatePicker from "/@/plugins/use/DatePicker.vue";
  import TestJson from "/@/plugins/use/test.json";
  import dayjs from "dayjs";

  const dataForm = reactive({
    keyword: "",
    name: "",
    range: "",
    date: "",
  });
  const options = ref([]);
  const rangeMoreRef = ref();
  //
  const reckonData = ref(null);

  const ruleForm = reactive({});

  // 提交
  const handleSubmit = () => {
    // 组件取值
    const { vEnd, vStart } = rangeMoreRef.value;

    const { date, keyword, name } = dataForm;

    reckonData.value = {
      dateStart: date ? dayjs(date[0]).format("YYYY-MM-DD HH:mm:ss") : "",
      dateEnd: date ? dayjs(date[1]).format("YYYY-MM-DD HH:mm:ss") : "",
      rangeStart: vStart || "",
      rangeEnd: vEnd || "",
      keyword,
      name,
    };
  };

  onMounted(async () => {
    // 测试数据
    const res = await TestJson;
    options.value = res.data.list.map((item) => {
      return {
        value: item.number,
        label: item.name,
      };
    });
  });
</script>

<style lang="scss" scoped></style>
